//import QtQuick 2.0
import QtQuick 2.4
import QtQuick.Dialogs 1.2
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

Rectangle {

   color:"#343434"
   //显示入管，出管，cot的线条标记
   property bool show_tube_in_line:true
   property bool show_tube_out_line:true
   property bool show_tube_cot_line: true

   property int forunce_num_value: 5//炉号
   property string from_date;
   property string to_date;
   property bool shown_comand_panel:false
   property int current_tube_index:0

   property color defualt_tube_line_color: "#1299df"

   //查询回来的json数据
   property var queryData;

   function show_comand_panel(){
       comand_panel.visible=true
       comand_panel.enabled=true
       shown_comand_panel=true
   }

   function confirm_selection(){
       var mindex=0;
       //清空一选管号的数据
       selected_tube_list_model.clear();

       //重新添加数据
       for(mindex=0;mindex<tube_list_model.count;mindex++){
           if(tube_list_model.get(mindex).selected==true){
               selected_tube_list_model.append({"tubenum":tube_list_model.get(mindex).tubenum,
                                                   "linecolor":tube_list_model.get(mindex).linecolor,
                                                   "echoline":true,
                                                   "selected":tube_list_model.get(mindex).selected
                                               }
                                                   );
           }
       }
       //关闭选择框
       shown_comand_panel=false;
       comand_panel.visible=false
       comand_panel.enabled=false

   }

   //取消选择时所调用的重新设置配置函数
   function reset_selection(){
       //重置炉管列表数据
       var mindex1=0;
       for(mindex1=0;mindex1<tube_list_model.count;mindex1++){
           tube_list_model.set(mindex1,{"tubenum":tube_list_model.get(mindex1).tubenum,
                                   "selected":false,
                                   "linecolor":"#101010"
                               }
                                   )
       }
       //关闭选择框
       shown_comand_panel=false;
       comand_panel.visible=false
       comand_panel.enabled=false
   }


   //临时存放温度的信息
   ListModel{
       id:finalTubeInTempModel
   }

   ListModel{
       id:finalTubeOutTempModel
   }

   ListModel{
       id:finalTubeCotTempModel   }


   //48根管信息存放模型 弹出的选择框
   ListModel{
       id:tube_list_model
       ListElement{
           tubenum:1
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:2
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:3
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:4
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:5
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:6
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:7
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:8
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:9
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:10
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:11
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:12
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:13
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:14
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:15
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:16
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:17
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:18
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:19
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:20
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:21
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:22
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:23
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:24
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:25
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:26
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:27
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:28
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:29
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:30
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:31
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:32
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:33
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:34
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:35
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:36
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:37
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:38
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:39
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:40
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:41
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:42
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:43
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:44
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:45
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:46
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:47
           selected:false
           linecolor: "#101010"
       }
       ListElement{
           tubenum:48
           selected:false
           linecolor: "#101010"
       }

   }

   //选定后的炉管模型
   ListModel{
       id:selected_tube_list_model
   }

   //管列表栏目
   Rectangle{
       id: tube_list
       width: 220
       height: parent.height-100
       anchors.verticalCenter: parent.verticalCenter
       x:40
       color: "#999999"//银灰
       radius: 4
       border.width: 4
       border.color: "#1278df"//蓝
       enabled: shown_comand_panel?false:true

       Rectangle{
           id:list_title
           width: parent.width
           y:4
           height: 45
           Text {
               text: qsTr("比较炉管列表")
               anchors.centerIn: parent
               color: "#aaaaaa"//银灰
               font.pixelSize: 30
           }
           color: "#1278df"//蓝色
       }

       //列表容器
       Rectangle{
           id:list_container
           width: parent.width-8
           height: parent.height-8-60-list_title.height
           color: "#222222"//黑色
           anchors.horizontalCenter: parent.horizontalCenter
           anchors.top: list_title.bottom
           border.width: 1

           Rectangle{
               id:addItemBnt
               border.color: "#222222"
               width: parent.width
               height: 60
               color: ma1.containsMouse?"#aaaaaa": "#9f9f9f"//：浅银灰
               //十字按钮
               Rectangle{
                   width: 50
                   height: 50
                   radius: 25
                   anchors.centerIn: parent
                   border.width: 2
                   border.color: "#444444"//亮黑
                   color: parent.color
                   Rectangle{
                       width: parent.width-20
                       height: 5
                       anchors.centerIn: parent
                       color: "#444444"
                       radius: 2
                   }
                   Rectangle{
                       width: 5
                       height: parent.height-20
                       anchors.centerIn: parent
                       color: "#444444"
                       radius: 2
                   }
               }
               MouseArea{
                   id: ma1
                   hoverEnabled: true
                   anchors.fill: parent
                   onClicked: {

                       if(selected_tube_list_model.count==0){
                       //重置数据列表
                           reset_selection()
                       }
                       else if(selected_tube_list_model.count>0){
                           for(var a=0;a<selected_tube_list_model.count;a++){
                               tube_list_model.set(selected_tube_list_model.get(a).tubenum-1,
                                                   {
                                                      "tubenum": selected_tube_list_model.get(a).tubenum,
                                                       "selected":selected_tube_list_model.get(a).selected,
                                                       "linecolor":selected_tube_list_model.get(a).linecolor
                                                   })
                           }
                       }

                       show_comand_panel()
                   }
               }

           }

           Rectangle{
               width: parent.width
               height: 20
               anchors.top:addItemBnt.bottom
               color: tube_list.border.color
               anchors.horizontalCenter: parent.horizontalCenter
           }

           ListView{
               id:tube_list_view
               width: parent.width
               height: parent.height-addItemBnt.height-20
               anchors.bottom: parent.bottom
               model: selected_tube_list_model
               clip:true
               delegate: Component{
                   Rectangle{
                       width: tube_list_view.width
                       height: 50
                       color: "#00000000"

                       Rectangle{
                           width: parent.width-15
                           height: 50
                           border.width: 1
                           border.color: "#101010"
                           color: linecolor
                           anchors.horizontalCenter: parent.horizontalCenter
                           //管号
                           Rectangle{
                               width: 40
                               height: 40
                               anchors.verticalCenter: parent.verticalCenter
                               x:10
                               radius: 20
                               color: "#aaaaaa"
                               border.width: 1
                               border.color: "#333333"
                               Text {
                                   text: tubenum
                                   font.pixelSize: 20
                                   color: "#333333"
                                   anchors.centerIn: parent
                               }
                           }

                           Rectangle{
                               width: 120
                               height: 45
                               anchors.right: parent.right
                               color: "#aaaaaa"
                               border.width: 1
                               anchors.verticalCenter: parent.verticalCenter
                               border.color: "#202020"
                               radius: 3
                               Text {
                                   text: qsTr("显示曲线")
                                   font.pixelSize: 20
                                   anchors.verticalCenter: parent.verticalCenter
                                   x:5
                                   color: "#222222"
                               }
                           }

                           Rectangle{
                               width: 30
                               height: 30
                               radius: 15
                               anchors.right: parent.right
                               anchors.rightMargin: 5
                               border.width: 1
                               border.color: "#222222"
                               color:echoline?"#1293df":"#666666"
                               anchors.verticalCenter: parent.verticalCenter
                               MouseArea{
                                   anchors.fill: parent
                                   onClicked: {
                                       if(selected_tube_list_model.get(index).echoline==true){
                                           selected_tube_list_model.set(index,{"tubenum":selected_tube_list_model.get(index).tubenum,
                                                                            "linecolor":selected_tube_list_model.get(index).linecolor,
                                                                            "echoline":false
                                                                        }
                                                                            )
                                       }
                                       else{
                                           selected_tube_list_model.set(index,{"tubenum":selected_tube_list_model.get(index).tubenum,
                                                                            "linecolor":selected_tube_list_model.get(index).linecolor,
                                                                            "echoline":true
                                                                        }
                                                                            )
                                       }

                                   }
                               }
                           }
                       }

                   }
               }
           }
       }
       //清空列表按钮
       Rectangle{
           width: parent.width-8
           height:10
           anchors.horizontalCenter: parent.horizontalCenter
           anchors.bottom: clearListBnt.top
           color: parent.border.color
       }

       Rectangle{
           id:clearListBnt
           width: parent.width-8
           anchors.horizontalCenter: parent.horizontalCenter
           height: 50
           anchors.bottom: parent.bottom
           anchors.bottomMargin: 4
           border.color: "#222222"
           border.width: 1
           color: clearlistma.containsMouse?"#aaaaaa": "#9f9f9f"
           Text {
               text: qsTr("清空列表")
               anchors.centerIn: parent
               font.pixelSize: 25
               color: clearlistma.containsMouse?"#1277aa":"#353535"
           }
           MouseArea{
               anchors.fill: parent
               id:clearlistma
               hoverEnabled: true
               onClicked: {
                   selected_tube_list_model.clear()
                   canvas.context.clearRect(0, 0, canvas.width, canvas.height)

                   canvas.draw_x_coordinate();
                   canvas.draw_y_corrdinate();
                   canvas.draw_grid(30,20);
                   canvas.requestPaint()

               }
           }
       }


   }

   //可视化数据面板
   Rectangle{
       id: dataGraph_panel
       width: parent.width-tube_list.width-40-10-2
       height: parent.height-40
       anchors.right: parent.right
       anchors.rightMargin: 2
       color: "#9f9f9f"
       anchors.verticalCenter: parent.verticalCenter
       enabled: shown_comand_panel?false:true
       border.width: 1
       border.color: "#dddddd"

       //曲线绘制区域
       Rectangle {
           id: canvasItem
           width: parent.width-10
           height: parent.height-datasLine_hint.height-5-10-10
           anchors.horizontalCenter: parent.horizontalCenter
           anchors.bottom: parent.bottom
           anchors.bottomMargin: 5
           color: "#dddddd"

           //单位标签
           Text {
               text: qsTr("温度（℃）")
               font.pixelSize: 20
               x:100
               y:65
               color: "#444444"
           }

           Text {
               text: qsTr("日期")
               font.pixelSize: 20
               x:canvas.end_x+10
               y:canvas.start_y-20
               color: "#444444"
           }

           Canvas{

               //坐标轴颜色
               property color coordinate_color: "#222222"

               //网格颜色
               property color grids_line_color: "#1f000000"

               //起始坐标位置
               property int start_x:100
               property int start_y:height-100

               //末端坐标位置
               property int end_x:width-100
               property int end_y:100

               //坐标长度
               property int x_coordinate_length:end_x-start_x
               property int y_coordinate_length:start_y-end_y
               //没有图片??不要了
               property url in_img:"qrc:/icons/in.png"
               property url out_img:"qrc:/icons/out.png"
               property url cot_img:"qrc:/icons/cot.png"

               Text {
                   id: intext
                   text: qsTr("入管温度曲线")
                   anchors.rightMargin: parent.width/2
                   anchors.right: parent.right
                   y:30
                   font.pixelSize: 15

               }
               Image{
                   id:inImg
                   width: 18
                   height: 18
                   source: "qrc:/icons/in.png"
                   anchors.right: intext.left
                   anchors.rightMargin: 5
                   anchors.verticalCenter: intext.verticalCenter
               }
               Text {
                   id: outtext
                   text: qsTr("出管温度曲线")
                   anchors.rightMargin: parent.width/2
                   anchors.right: parent.right
                   anchors.top:intext.bottom
                   anchors.topMargin: 12
                   font.pixelSize: 15

               }
               Image{
                   id:outImg
                   width: 18
                   height: 18
                   source: "qrc:/icons/out.png"
                   anchors.right: outtext.left
                   anchors.rightMargin: 5
                   anchors.verticalCenter: outtext.verticalCenter
               }
               Text {
                   id: cottext
                   text: qsTr("COT温度曲线")
                   anchors.rightMargin: parent.width/2
                   anchors.right: parent.right
                   anchors.top:outtext.bottom
                   anchors.topMargin: 12
                   font.pixelSize: 15

               }
               Image{
                   id:cotImg
                   width: 18
                   height: 18
                   source: "qrc:/icons/cot.png"
                   anchors.right: cottext.left
                   anchors.rightMargin: 13
                   anchors.verticalCenter: cottext.verticalCenter
               }



               ListModel{
                   id:tempModel
                   ListElement{
                       temp:700
                   }
                   ListElement{
                       temp:725
                   }
                   ListElement{
                       temp:750
                   }
                   ListElement{
                       temp:775
                   }
                   ListElement{
                       temp:800
                   }
                   ListElement{
                       temp:825
                   }
                   ListElement{
                       temp:850
                   }
                   ListElement{
                       temp:875
                   }
                   ListElement{
                       temp:900
                   }
                   ListElement{
                       temp:925
                   }
                   ListElement{
                       temp:950
                   }
                   ListElement{
                       temp:975
                   }
                   ListElement{
                       temp:1000
                   }
                   ListElement{
                       temp:1025
                   }
                   ListElement{
                       temp:1050
                   }
                   ListElement{
                       temp:1075
                   }
                   ListElement{
                       temp:1100
                   }
                   ListElement{
                       temp:1125
                   }
                   ListElement{
                       temp:1150
                   }
               }

               id:canvas
               anchors.fill: parent

               //绘制横坐标
               function draw_x_coordinate(){
                   var ctx = canvas.getContext('2d');
                   ctx.strokeStyle=coordinate_color;
                   ctx.lineWidth=2;
                   ctx.beginPath();
                   ctx.moveTo(start_x,start_y);
                   ctx.lineTo(end_x,start_y);
                   ctx.stroke();

               }

               //绘制纵坐标
               function draw_y_corrdinate(){
                   var ctx = canvas.getContext('2d');
                   ctx.strokeStyle=coordinate_color;
                   ctx.lineWidth=2;
                   ctx.beginPath();
                   ctx.moveTo(start_x,start_y);
                   ctx.lineTo(start_x,end_y);
                   ctx.stroke();
                   ctx.closePath();
               }

               //绘制网格
               function draw_grid(x_gnum,y_gnum){
                   var ctx = canvas.getContext('2d');
                   ctx.strokeStyle=grids_line_color;
                   ctx.lineWidth=1;
                   ctx.font= ' 20 14px Unknown Font, sans-serif';
                   ctx.fillStyle="#444444"



                   var colNum=0;
                   if(finalTubeInTempModel.count==0){
                       colNum=x_gnum
                   }
                   else{
                       colNum=finalTubeInTempModel.count
                   }

                   var lindex=0;
                   var dx_length=x_coordinate_length/colNum;
                   var dy_length=y_coordinate_length/y_gnum;

                   //绘制垂直线
                   for(lindex=1;lindex<colNum;lindex++){
                       ctx.beginPath();
                       ctx.moveTo(start_x+lindex*dx_length,start_y);
                       ctx.lineTo(start_x+lindex*dx_length,end_y+dy_length/2);
                       ctx.stroke();
                       ctx.closePath();
                   }

                   //绘制水平线
                   for(lindex=1;lindex<y_gnum;lindex++){
                       ctx.beginPath();
                       ctx.moveTo(start_x,start_y-dy_length*lindex);
                       ctx.lineTo(end_x-10,start_y-dy_length*lindex)
                       ctx.fillText(tempModel.get(lindex-1).temp,start_x-40,start_y-dy_length*lindex+7)
                       ctx.stroke();
                       ctx.closePath();
                   }
               }


               //绘制曲线
               function draw_lines(modelObject,type){

                   var ctx = canvas.getContext('2d');
                   ctx.strokeStyle=modelObject.get(0).color
                   ctx.lineWidth=1;

//                   console.log("******************************************"+modelObject.get(0).color)
                   var dy_length=y_coordinate_length/20;
                   var dx_length=x_coordinate_length/modelObject.count

                   ctx.fillStyle="#333333"//黑灰色

                   //绘制
                   ctx.beginPath();
                   //18为700到1150间的格子数，0到700有一格所以-dy_length
                   ctx.moveTo(start_x,start_y-dy_length-(modelObject.get(0).temp-700)*dy_length*18/450)
                   if(type=="in"){
                       ctx.drawImage(in_img,start_x-5, start_y-dy_length-(modelObject.get(0).temp-700)*dy_length*18/450-5,10,10)
                   }
                   else if(type=="out"){
                       ctx.drawImage(out_img,start_x-5, start_y-dy_length-(modelObject.get(0).temp-700)*dy_length*18/450-5,10,10)
                   }
                   else if(type=="cot"){
                       ctx.drawImage(cot_img,start_x-5, start_y-dy_length-(modelObject.get(0).temp-700)*dy_length*18/450-5,10,10)
                   }
                   ctx. fillText(queryData[0].time,start_x-20,start_y+20)

                   for(var a=1;a<modelObject.count;a++){
                       ctx.lineTo(start_x+dx_length*a,start_y-dy_length-(modelObject.get(a).temp-700)*dy_length*18/450)
                   }
                   ctx.stroke()

                   for(var d=1;d<modelObject.count;d++){
                       if(type=="in"){
                           ctx.drawImage(in_img,start_x+dx_length*d-5, start_y-dy_length-(modelObject.get(d).temp-700)*dy_length*18/450-5,10,10)
                       }
                       else if(type=="out"){
                           ctx.drawImage(out_img,start_x+dx_length*d-5, start_y-dy_length-(modelObject.get(d).temp-700)*dy_length*18/450-5,10,10)
                       }
                       else if(type=="cot"){
                           ctx.drawImage(cot_img,start_x+dx_length*d-5, start_y-dy_length-(modelObject.get(d).temp-700)*dy_length*18/450-5,10,10)
                       }
                       if(modelObject.count>20&&modelObject.count<=40){
                           if(d%2==0){
                               ctx.fillText(queryData[d].time,start_x+dx_length*d-20,start_y+20)
                           }
                       }
                       else if(modelObject.count>40&&modelObject.count<=60){
                           if(d%3==0){
                               ctx.fillText(queryData[d].time,start_x+dx_length*d-20,start_y+20)
                           }
                       }
                       else if(modelObject.count>60&&modelObject.count<=80){
                           if(d%4==0){
                               ctx.fillText(queryData[d].time,start_x+dx_length*d-20,start_y+20)
                           }
                       }
                       else if(modelObject.count>80&&modelObject.count<=100){
                           if(d%5==0){
                               ctx.fillText(queryData[d].time,start_x+dx_length*d-20,start_y+20)
                           }
                       }
                       else if(modelObject.count>100){
                           if(d%6==0){
                               ctx.fillText(queryData[d].time,start_x+dx_length*d-20,start_y+20)
                           }
                       }

                       else{
                           ctx.fillText(queryData[d].time,start_x+dx_length*d-20,start_y+20)
                       }
                   }
                   ctx.stroke()

               }
               onPaint:{
                   draw_x_coordinate();
                   draw_y_corrdinate();
                   draw_grid(30,20);
               }
               Component.onCompleted: {
                   loadImage(in_img)
                   loadImage(out_img)
                   loadImage(cot_img)
               }
               onImageLoaded: requestPaint()

           }
       }


       //基本设置区域
       Rectangle{
           id:datasLine_hint
           width: parent.width-40
           height: 200
           y:10
           anchors.horizontalCenter: parent.horizontalCenter
           color: "#777777"

           //入管显示标签
           Rectangle{
               id:tube_in_show_flag
               width: 450
               height: parent.height/3
               color: "#1266aa"
               Text {

                   text: qsTr("显示入管温度曲线")
                   font.pixelSize: 35
                   color: "#aaaaaa"
                   anchors.verticalCenter: parent.verticalCenter
                   x:15
               }
               Rectangle{
                   width: 50
                   height: 50
                   radius: 25
                   border.width: 5
                   border.color: "#404040"
                   color: "#df7812"
                   anchors.verticalCenter: parent.verticalCenter
                   anchors.right: parent.right
                   anchors.rightMargin: 15
                   MouseArea{
                       anchors.fill: parent
                       onClicked: {
                           show_tube_in_line=(show_tube_in_line?false:true)
                           parent.color=(show_tube_in_line?"#df7812":"#666666")

                       }
                   }
               }

               Rectangle{
                   width: parent.width
                   height: 1
                   color: "#777777"
                   anchors.bottom: parent.bottom
               }
           }
           //出管显示标签
           Rectangle{
               id:tube_out_show_flag
               width: 450
               height: parent.height/3
               color: "#1266aa"
               y:parent.height/3
               Rectangle{
                   width: 50
                   height: 50
                   radius: 25
                   border.width: 5
                   border.color: "#404040"
                   color: "#df7812"
                   anchors.verticalCenter: parent.verticalCenter
                   anchors.right: parent.right
                   anchors.rightMargin: 15
                   MouseArea{
                       anchors.fill: parent
                       onClicked: {
                           show_tube_out_line=(show_tube_out_line?false:true)
                           parent.color=(show_tube_out_line?"#df7812":"#666666")

                       }
                   }
               }
               Text {

                   text: qsTr("显示出管温度曲线")
                   font.pixelSize: 35
                   color: "#aaaaaa"
                   anchors.verticalCenter: parent.verticalCenter
                   x:15
               }
               Rectangle{
                   width: parent.width
                   height: 1
                   color: "#777777"
                   anchors.bottom: parent.bottom
               }
           }
           //COT显示标签
           Rectangle{
               id:tube_cot_show_flag
               width: 450
               height: parent.height/3
               color: "#1266aa"
               y:parent.height*2/3
               Rectangle{
                   width: 50
                   height: 50
                   radius: 25
                   border.width: 5
                   border.color: "#404040"
                   color: "#df7812"
                   anchors.verticalCenter: parent.verticalCenter
                   anchors.right: parent.right
                   anchors.rightMargin: 15
                   MouseArea{
                       anchors.fill: parent
                       onClicked: {
                           show_tube_cot_line=(show_tube_cot_line?false:true)
                           parent.color=(show_tube_cot_line?"#df7812":"#666666")

                       }
                   }
               }
               Text {

                   text: qsTr("显示COT温度曲线")
                   font.pixelSize: 35
                   color: "#aaaaaa"
                   anchors.verticalCenter: parent.verticalCenter
                   x:15
               }
           }

           //炉号选择框
           Rectangle{
               id:forunce_num
               width: 400
               height: parent.height-10
               anchors.left: tube_out_show_flag.right
               anchors.leftMargin: 10
               anchors.verticalCenter: parent.verticalCenter
               color: "#12aa78"
               radius: 3
               Rectangle{
                   width: parent.width
                   height: 3
                   anchors.centerIn: parent
                   color: "#126690"
               }

               Text {
                   text: qsTr("当前炉号为:")+forunce_num_value
                   font.pixelSize: 30
                   anchors.horizontalCenter: parent.horizontalCenter
                   y:30
                   color: "#dddddd"
               }
               Rectangle{
                   width: parent.width-20
                   height: 60
                   anchors.bottom: parent.bottom
                   anchors.bottomMargin: 20
                   anchors.horizontalCenter: parent.horizontalCenter
                   color: "#1278df"
                   radius: 3
                   border.width: 1
                   border.color: ma.containsMouse?"#124545":"#00000000"
                   MouseArea{
                       anchors.fill: parent
                       id:ma
                       hoverEnabled: true
                   }

                   Rectangle{
                       id:foruncenumrec
                       width: 100
                       height: 40
                       anchors.verticalCenter: parent.verticalCenter
                       radius: 3
                       color: foruncenumrecma.containsMouse?"#bbbbbb":"#aaaaaa"
                       Text {
                           text: forunce_num_value
                           anchors.centerIn: parent
                           font.pixelSize: 25
                           color: "#333333"
                       }
                       border.width: 1
                       border.color: "#666666"
                       MouseArea{
                           anchors.fill: parent
                           id:foruncenumrecma
                           hoverEnabled: true
                           onClicked: {
                               foruncelist.shownl=true
                           }
                       }
                       ListModel{
                           id:foruncemodel
                           ListElement{
                               num:1
                           }
                           ListElement{
                               num:2
                           }
                           ListElement{
                               num:3
                           }
                           ListElement{
                               num:4
                           }
                           ListElement{
                               num:5
                           }
                           ListElement{
                               num:6
                           }
                           ListElement{
                               num:7
                           }
                           ListElement{
                               num:8
                           }
                           ListElement{
                               num:9
                           }
                           ListElement{
                               num:10
                           }
                           ListElement{
                               num:11
                           }

                       }

                       ListView{

                           Behavior on height{
                               PropertyAnimation{
                                   properties: "height"
                                   duration: 200
                               }
                           }
                           property bool shownl:false
                           id:foruncelist
                           width: foruncenumrec.width
                           height: shownl?30*11:0
                           model:foruncemodel
                           anchors.top:foruncenumrec.bottom
                           clip: true
                           delegate:  Rectangle{
                               width: 100
                               height: 30
                               color: itemma.containsMouse?"#bbbbbb":"#aaaaaa"
                               Rectangle{
                                   width: 1
                                   height: parent.height
                                   color:"#666666"
                               }
                               Rectangle{
                                   width: 1
                                   height: parent.height
                                   color:"#666666"
                                   anchors.right: parent.right
                               }
                               Rectangle{
                                   width: parent.width
                                   height: 1
                                   color:"#666666"
                                   visible: index==0
                               }
                               Rectangle{
                                   width: parent.width
                                   height: 1
                                   color:"#666666"
                                   anchors.bottom: parent.bottom

                               }

                               Text {
                                   text: num
                                   anchors.centerIn: parent
                                   font.pixelSize: 25
                                   color: "#333333"
                               }
                               MouseArea{
                                   anchors.fill: parent
                                   id:itemma
                                   hoverEnabled: true
                                   onClicked: {
                                       forunce_num_value=num
                                       foruncelist.shownl=false

                                   }


                               }

                           }

                       }

                       x:20
                   }
                   Text {
                       text: qsTr("修改炉号")
                       font.pixelSize: 25
                       anchors.verticalCenter: parent.verticalCenter
                       anchors.right: parent.right
                       anchors.rightMargin: 100
                       color: "#dddddd"
                   }
               }
           }

           //显示当前时间段
           Rectangle{
               id: echo_time_panel
               width: parent.width-tube_in_show_flag.width-forunce_num.width-40
               height: parent.height-10
               anchors.verticalCenter: parent.verticalCenter
               anchors.right: parent.right
               anchors.rightMargin: 10
               radius: 3
               color: "#1289aa"
               Text {
                   id:title
                   text: qsTr("当前选择的时间段")
                   anchors.horizontalCenter: parent.horizontalCenter
                   y:6
                   color: "#dddddd"
                   font.pixelSize: 25
               }
               Text {
                   id:fromdatetext
                   text: qsTr("从: ")+from_date
                   font.pixelSize: 25
                   color: "#cccccc"
                   anchors.top: title.bottom
                   anchors.topMargin: 5
                   x:25
               }
               Text {
                   id: todatetext
                   text: qsTr("到: ")+to_date
                   font.pixelSize: 25
                   color: "#cccccc"
                   anchors.top: fromdatetext.bottom
                   anchors.topMargin: 5
                   x:25
               }

               Rectangle{

                   width: parent.width
                   height: 3
                   color: "#333333"
                   anchors.bottom: refreshBnt.top
                   anchors.bottomMargin: 10
               }

               Rectangle{
                   id: refreshBnt
                   width: parent.width-80
                   height: 60
                   anchors.bottom: parent.bottom
                   anchors.bottomMargin: 10
                   radius: 3
                   color: "#12bb78"
                   anchors.horizontalCenter: parent.horizontalCenter
                   border.width: 1
                   border.color: refreshma.containsMouse?"#006645":refreshBnt.color
                   Text {
                       text: qsTr("开始管管比较")
                       font.pixelSize: 25
                       color: "#dddddd"
                       anchors.centerIn: parent
                   }
                   MouseArea{
                       id:refreshma
                       anchors.fill: parent
                       hoverEnabled: true
                       onClicked: {
                           var fromdate=new Date(from_date)
                           var todate=new Date(to_date)

                           var indexa=0
                           var indexb=0

                           canvas.context.clearRect(0, 0, canvas.width, canvas.height)
                           for(indexa=0;indexa<selected_tube_list_model.count;indexa++){

                               //判断是否确定要显示这跟管的曲线
                               if(selected_tube_list_model.get(indexa).echoline==true){
                                   //判断是否显示入管的所有曲线
                                   if(show_tube_in_line==true){
                                       //清空model里面的数据
                                       finalTubeInTempModel.clear()
                                       //感觉下面这一句应该放外面??
                                       queryData=server.compare_datas(forunce_num_value,selected_tube_list_model.get(indexa).tubenum,fromdate,todate)
                                       for (indexb=0;indexb<queryData.length;indexb++){
                                           finalTubeInTempModel.append({"temp":queryData[indexb].temp_in,"color":selected_tube_list_model.get(indexa).linecolor})
                                       }
                                       canvas.draw_lines(finalTubeInTempModel,"in")
                                   }

                                   //判断是否显示出管的所有曲线
                                   if(show_tube_out_line==true){
                                       finalTubeOutTempModel.clear()
                                       queryData=server.compare_datas(forunce_num_value,selected_tube_list_model.get(indexa).tubenum,fromdate,todate)
//                                       var datasLength=queryData.length;
                                       for (var indexb=0;indexb<queryData.length;indexb++){
                                           finalTubeOutTempModel.append({"temp":queryData[indexb].temp_out,"color":selected_tube_list_model.get(indexa).linecolor})


                                       }
//                                       console.log("out line draw color: "+finalTubeOutTempModel.get(0).color)
                                       canvas.draw_lines(finalTubeOutTempModel,"out")

                                   }

                                   ////判断是否显示cot的所有曲线
                                   if(show_tube_cot_line){

                                   }


                                   var xlinecount=queryData.length;
                                   canvas.draw_x_coordinate();
                                   canvas.draw_y_corrdinate();
                                   canvas.draw_grid(xlinecount,20);
                                   canvas.requestPaint()
                               }
                           }
                       }
                   }




               }
           }

       }
   }

   //蒙版
   Rectangle{
       anchors.fill: parent
       color: "#88000000"//透明灰
       visible: shown_comand_panel?true:false
   }

   //条件选择框
   Rectangle{
       id:comand_panel
       width: 1200
       height: 800
       x:parent.width/2-width/2
       y:parent.height/2-height/2
       visible: false
       enabled: false
       border.color: "#333333"
       Rectangle{
           width: parent.width
           height: 40
           color: "#1293df"
           Text {
               id: maintitle
               text: qsTr("管列表筛选框")
               anchors.centerIn: parent
               font.pixelSize: 30
               color: "#dddddd"
           }
           MouseArea{
               anchors.fill: parent
               drag.target: comand_panel
               drag.axis: Drag.XandYAxis
               drag.minimumX: 0
               drag.minimumY: 0
               drag.maximumX: compareTubesView.width-comand_panel.width
               drag.maximumY: compareTubesView.height-comand_panel.height
           }
       }

       //管号选择框
       Rectangle{
           width: parent.width-120
           height: 500
           anchors.horizontalCenter: parent.horizontalCenter
           y:60
           color: "#12adad"
           border.width: 1
           border.color: "#444444"
           radius: 3
           Text {
               id: comandtitle
               text: qsTr("选择要比较的炉管和对应显示的颜色")
               font.pixelSize: 30
               anchors.horizontalCenter: parent.horizontalCenter
               y:10
           }

           Rectangle{
               id:listviewrec
               width: parent.width-20
               height: parent.height-comandtitle.height-30
               anchors.bottom: parent.bottom
               anchors.bottomMargin: 10
               radius: 4
               clip: true
               color: "#666666"
               anchors.horizontalCenter: parent.horizontalCenter
               ListView{
                   id:listview
                   anchors.fill: parent
                   model: tube_list_model
                   clip: true
                   delegate: Component{
                       Rectangle{
                           width: listview.width
                           height: 45
                           color: "#dddddd"
                           Rectangle{
                               width: parent.width
                               height: 1
                               color: "#666666"
                               anchors.bottom: parent.bottom
                           }

                           Rectangle{
                               id:select_radio
                               width: 30
                               height: 30
                               x:30
                               radius: 15
                               anchors.verticalCenter: parent.verticalCenter
                               border.width: 3
                               border.color: "#444444"
                               color: selected?"#1296df":"#777777"//蓝色：灰色
                               MouseArea{
                                   anchors.fill: parent
                                   onClicked: {
                                       if(tube_list_model.get(index).selected==true){
                                           tube_list_model.set(index,{"tubenum":tubenum,
                                                                   "selected":false,
                                                                   "linecolor": tube_list_model.get(index).linecolor})
                                       }
                                       else{
                                           tube_list_model.set(index,{"tubenum":tubenum,
                                                                   "selected":true,
                                                                   "linecolor": tube_list_model.get(index).linecolor})
                                       }
                                   }
                               }

                           }

                           Rectangle{
                               id:tubenumtextrec
                               width: 100
                               height: 40
                               anchors.verticalCenter: parent.verticalCenter
                               anchors.left: select_radio.right
                               anchors.leftMargin: 20
                               radius: 3
                               color: "#1278af"
                               Text {
                                   text: tubenum+"号管"
                                   anchors.centerIn: parent
                                   font.pixelSize: 25
                                   color: "#222222"
                               }
                           }
                           Text {
                               id:colortext
                               text: qsTr("当前管号曲线颜色：")
                               font.pixelSize: 20
                               anchors.verticalCenter: parent.verticalCenter
                               anchors.left: tubenumtextrec.right
                               anchors.leftMargin: 120
                               color:"#333333"
                           }
                           Rectangle{
                               width: 300
                               height: 6
                               color: linecolor
                               anchors.left: colortext.right
                               anchors.leftMargin: 10
                               anchors.verticalCenter: parent.verticalCenter
                           }

                           Rectangle{
                               width: 100
                               height: parent.height-10
                               anchors.verticalCenter: parent.verticalCenter
                               anchors.right: parent.right
                               anchors.rightMargin: 50
                               color: "#12aa97"
                               radius: 3
                               Text {
                                   text: qsTr("修改颜色")
                                   font.pixelSize: 20
                                   anchors.centerIn: parent
                                   color: "#dddddd"
                               }
                               border.width: 1
                               border.color: mmma.containsMouse?"#333333":color
                               MouseArea{
                                   anchors.fill: parent
                                   hoverEnabled: true
                                   id:mmma
                                   onClicked: {
                                       current_tube_index=index
                                       colordialog.open()
                                   }
                               }
                           }
                       }
                   }
               }

               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.right: listviewrec.right
//                    anchors.rightMargin: 1
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.right: listviewrec.right
                   anchors.rightMargin: 1
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#aadddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#aa666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#aadddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.right: listviewrec.right
                   anchors.rightMargin: 2
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#99dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#99666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#99dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.right: listviewrec.right
                   anchors.rightMargin: 3
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#66dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#66666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#66dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.right: listviewrec.right
                   anchors.rightMargin: 4
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#33dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#33666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#33dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.right: listviewrec.right
                   anchors.rightMargin: 5
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#11dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#11666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#11dddddd";
                       }
                   }
               }


               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.left: listviewrec.left
//                    anchors.rightMargin: 1
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.left: listviewrec.left
                   anchors.leftMargin: 1
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#aadddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#aa666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#aadddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.left: listviewrec.left
                   anchors.leftMargin: 2
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#99dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#99666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#99dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.left: listviewrec.left
                   anchors.leftMargin: 3
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#66dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#66666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#66dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.left: listviewrec.left
                   anchors.leftMargin: 4
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#33dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#33666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#33dddddd";
                       }
                   }
               }
               Rectangle{
                   width: 1
                   height: listviewrec.height
                   anchors.left: listviewrec.left
                   anchors.leftMargin: 5
                   anchors.verticalCenter: listviewrec.verticalCenter
                   gradient: Gradient {
                       GradientStop {
                           position: 0.00;
                           color: "#11dddddd";
                       }
                       GradientStop {
                           position: 0.50;
                           color: "#11666666";
                       }
                       GradientStop {
                           position: 1.00;
                           color: "#11dddddd";
                       }
                   }
               }


           }

           Rectangle{
               width: listviewrec.width
               height: 1
               color: "#333333"
               anchors.bottom: listviewrec.top
               anchors.horizontalCenter: listviewrec.horizontalCenter
           }
           Rectangle{
               width: listviewrec.width
               height: 1
               color: "#333333"
               anchors.top: listviewrec.bottom
               anchors.horizontalCenter: listviewrec.horizontalCenter
           }
           Rectangle{
               width: 1
               height: listviewrec.height
               color: "#333333"
               anchors.left: listviewrec.right
               anchors.verticalCenter: listviewrec.verticalCenter
           }
           Rectangle{
               width: 1
               height: listviewrec.height
               color: "#333333"
               anchors.right: listviewrec.left
               anchors.verticalCenter: listviewrec.verticalCenter
           }

       }


       //时间选择栏目
       Rectangle{
           width: parent.width
           height: 220
           anchors.bottom: parent.bottom
           color: "#1293af"
           //时间选择栏目
           Rectangle{
               id: timeSelectpanel
               width: parent.width-200
               height: 100
               anchors.horizontalCenter: parent.horizontalCenter
               color: "#444444"
               y:20
               radius: 4

               //从时间
               Text {
                   id: selectDate1
                   text: qsTr("从时间: ")
       //            anchors.verticalCenter: currrentDate.verticalCenter
                   y: 10
                   anchors.left: currrentDate.right
                   anchors.leftMargin: 90
                   x:200
                   font.pixelSize: 30
                   color: "#12ddaf"
               }
               Rectangle{
                   id: yearText1Rec1
                   width: 80
                   height: 30
                   anchors.verticalCenter: selectDate1.verticalCenter
                   anchors.left: selectDate1.right
                   anchors.leftMargin: 20
                   radius: 3
                   color: "#333333"
                   clip: true
                   TextField{
                       id: yearText1
                       width: parent.width
                       height: parent.height

                       y:2
                       x:5
                       validator: IntValidator {bottom: 2000; top: 3000;}
           //            color: "#12afdd"
           //            inputMethodHints: Qt.ImhDate
                       style: TextFieldStyle {
                           textColor: "#12afdd"
                           font.pixelSize: 25
                           background: Rectangle {
                               implicitWidth: 80
                               implicitHeight: 30
                               radius: 3
                               color: "#333333"
                               clip: true
                           }
                       }

                   }
               }

               Text {
                   id: yearlabel1
                   text: qsTr("年")
                   font.pixelSize: 30
                   color: "#12ddaf"
                   anchors.verticalCenter: yearText1Rec1.verticalCenter
                   anchors.left: yearText1Rec1.right
                   anchors.leftMargin: 10
               }

               Rectangle{
                   id: monthText1Rec1
                   width: 80
                   height: 30
                   anchors.verticalCenter: yearlabel1.verticalCenter
                   anchors.left: yearlabel1.right
                   anchors.leftMargin: 20
                   radius: 3
                   color: "#333333"
                   clip: true
                   TextField{
                       id: monthText1
                       width: parent.width
                       height: parent.height
                       validator: IntValidator {bottom: 01; top: 12;}
                       y:2
                       x:5
           //            color: "#12afdd"
           //            inputMethodHints: Qt.ImhDate
                       style: TextFieldStyle {
                           textColor: "#12afdd"
                           font.pixelSize: 25
                           background: Rectangle {
                               implicitWidth: 80
                               implicitHeight: 30
                               radius: 3
                               color: "#333333"
                               clip: true
                           }
                       }

                   }
               }

               Text {
                   id: monthlabel1
                   text: qsTr("月")
                   font.pixelSize: 30
                   color: "#12ddaf"
                   anchors.verticalCenter: monthText1Rec1.verticalCenter
                   anchors.left: monthText1Rec1.right
                   anchors.leftMargin: 10
               }
               Rectangle{
                   id: dayTextRec1
                   width: 80
                   height: 30
                   anchors.verticalCenter: monthlabel1.verticalCenter
                   anchors.left: monthlabel1.right
                   anchors.leftMargin: 20
                   radius: 3
                   color: "#333333"
                   clip: true
                   TextField{
                       id: dayText1
                       width: parent.width
                       height: parent.height

                       y:2
                       x:5
                       validator: IntValidator {bottom: 01; top: 31 ;}

           //            color: "#12afdd"
           //            inputMethodHints: Qt.ImhDate
                       style: TextFieldStyle {
                           textColor: "#12afdd"
                           font.pixelSize: 25
                           background: Rectangle {
                               implicitWidth: 80
                               implicitHeight: 30
                               radius: 3
                               color: "#333333"
                               clip: true
                           }
                       }

                   }
               }

               Text {
                   id: daylabel11
                   text: qsTr("日")
                   font.pixelSize: 30
                   color: "#12ddaf"
                   anchors.verticalCenter: dayTextRec1.verticalCenter
                   anchors.left: dayTextRec1.right
                   anchors.leftMargin: 10
               }

               //到时间
               Text {
                   id: selectDate2
                   text: qsTr("到时间:")
       //            anchors.verticalCenter: currrentDate.verticalCenter
                   y: 60
                   anchors.left: currrentDate.right
                   anchors.leftMargin: 90
                   x:200
                   font.pixelSize: 30
                   color: "#12ddaf"
               }
               Rectangle{
                   id: yearText1Rec2
                   width: 80
                   height: 30
                   anchors.verticalCenter: selectDate2.verticalCenter
                   anchors.left: selectDate2.right
                   anchors.leftMargin: 35
                   radius: 3
                   color: "#333333"
                   clip: true
                   TextField{
                       id: yearText2
                       width: parent.width
                       height: parent.height

                       y:2
                       x:5
                       validator: IntValidator {bottom: 2000; top: 3000;}
           //            color: "#12afdd"
           //            inputMethodHints: Qt.ImhDate
                       style: TextFieldStyle {
                           textColor: "#12afdd"
                           font.pixelSize: 25
                           background: Rectangle {
                               implicitWidth: 80
                               implicitHeight: 30
                               radius: 3
                               color: "#333333"
                               clip: true
                           }
                       }

                   }
               }

               Text {
                   id: yearlabel2
                   text: qsTr("年")
                   font.pixelSize: 30
                   color: "#12ddaf"
                   anchors.verticalCenter: yearText1Rec2.verticalCenter
                   anchors.left: yearText1Rec2.right
                   anchors.leftMargin: 10
               }

               Rectangle{
                   id: monthText1Rec2
                   width: 80
                   height: 30
                   anchors.verticalCenter: yearlabel2.verticalCenter
                   anchors.left: yearlabel2.right
                   anchors.leftMargin: 20
                   radius: 3
                   color: "#333333"
                   clip: true
                   TextField{
                       id: monthText2
                       width: parent.width
                       height: parent.height
                       validator: IntValidator {bottom: 01; top: 12;}
                       y:2
                       x:5
           //            color: "#12afdd"
           //            inputMethodHints: Qt.ImhDate
                       style: TextFieldStyle {
                           textColor: "#12afdd"
                           font.pixelSize: 25
                           background: Rectangle {
                               implicitWidth: 80
                               implicitHeight: 30
                               radius: 3
                               color: "#333333"
                               clip: true
                           }
                       }

                   }
               }

               Text {
                   id: monthlabel2
                   text: qsTr("月")
                   font.pixelSize: 30
                   color: "#12ddaf"
                   anchors.verticalCenter: monthText1Rec2.verticalCenter
                   anchors.left: monthText1Rec2.right
                   anchors.leftMargin: 10
               }
               Rectangle{
                   id: dayTextRec2
                   width: 80
                   height: 30
                   anchors.verticalCenter: monthlabel2.verticalCenter
                   anchors.left: monthlabel2.right
                   anchors.leftMargin: 20
                   radius: 3
                   color: "#333333"
                   clip: true
                   TextField{
                       id: dayText2
                       width: parent.width
                       height: parent.height

                       y:2
                       x:5
                       validator: IntValidator {bottom: 01; top: 31 ;}

           //            color: "#12afdd"
           //            inputMethodHints: Qt.ImhDate
                       style: TextFieldStyle {
                           textColor: "#12afdd"
                           font.pixelSize: 25
                           background: Rectangle {
                               implicitWidth: 80
                               implicitHeight: 30
                               radius: 3
                               color: "#333333"
                               clip: true
                           }
                       }

                   }
               }

               Text {
                   id: daylabel12
                   text: qsTr("日")
                   font.pixelSize: 30
                   color: "#12ddaf"
                   anchors.verticalCenter: dayTextRec2.verticalCenter
                   anchors.left: dayTextRec2.right
                   anchors.leftMargin: 10
               }
           }

           //确定按钮
           Rectangle{
               width: parent.width
               height: 65
               anchors.bottom: parent.bottom
               Rectangle{
                   width: parent.width
                   height: 5
                   color: "#999999"
               }
               Rectangle{
                   id:confirmBnt
                   width: parent.width/2
                   height: 60
                   anchors.bottom: parent.bottom
                   Rectangle{
                       width: parent.width
                       height: 1
                       color: "#1288ff"
                   }
                   Rectangle{
                       width: 1
                       height: parent.height
                       anchors.right: parent.right
                       color: "#125577"
                   }
                   Rectangle{
                       width: 1
                       height: parent.height
                       anchors.left: parent.left
                       color: "#1288ff"
                   }

                   color: confirmma.containsMouse?"#1288cf": "#1266af"
                   Text {
                       text: qsTr("确定")
                       font.pixelSize: 40
                       anchors.centerIn: parent
                       color: "#bbbbbb"

                   }

                   MouseArea{
                       anchors.fill: parent
                       id:confirmma
                       hoverEnabled: true
                       onClicked: {
                           confirm_selection()
                           //时间更新
                           from_date=yearText1.text+"-"+monthText1.text+"-"+dayText1.text
                           to_date=yearText2.text+"-"+monthText2.text+"-"+dayText2.text
                       }
                   }
               }

               Rectangle{
                   id:cancelBnt
                   width: parent.width/2
                   height: 60
                   anchors.bottom: parent.bottom
                   anchors.right: parent.right
                   Rectangle{
                       width: parent.width
                       height: 1
                       color: "#1288ff"
                   }
                   Rectangle{
                       width: 1
                       height: parent.height
                       anchors.right: parent.right
                       color: "#125577"
                   }
                   Rectangle{
                       width: 1
                       height: parent.height
                       anchors.left: parent.left
                       color: "#1288ff"
                   }

                   color: cancelma.containsMouse?"#1288cf": "#1266af"
                   Text {
                       text: qsTr("取消")
                       font.pixelSize: 40
                       anchors.centerIn: parent
                       color: "#bbbbbb"
                   }

                   MouseArea{
                       anchors.fill: parent
                       id:cancelma
                       hoverEnabled: true
                       onClicked: {
                           reset_selection()
                       }
                   }
               }
           }
       }
   }

   //颜色选择框
   ColorDialog{
       id:colordialog
       title: "Please choose a color"
       color: "white"
       onAccepted: {
           tube_list_model.set(current_tube_index,{"tubenum":tube_list_model.get(current_tube_index).tubenum,
                                   "selected":tube_list_model.get(current_tube_index).selected,
                                   "linecolor": String(colordialog.color)})
       }
   }

}

